<template>

  <div class="local-culture">
    <!-- 顶部大图和快捷导航 -->
    <div class="hero-section">
      <div class="hero-image">
        <img src="@/assets/images/xcgs.png" alt="福州全景" class="main-image">
        <div class="hero-overlay">
          <h1>福州地方文化</h1>
          <p class="hero-subtitle">探索千年古城的文化瑰宝</p>
        </div>
      </div>
    </div>
    
    <!-- 右侧固定导航 -->
    <div class="fixed-navigation">
      <div class="nav-header">
        <h3>文化导航</h3>
      </div>
      <ul class="nav-links">
        <li><a href="#folk-culture" @click.prevent="scrollToSection('folk-culture')">地方民俗文化</a></li>
        <li><a href="#shipbuilding-culture" @click.prevent="scrollToSection('shipbuilding-culture')">船政文化</a></li>
        <li><a href="#art-culture" @click.prevent="scrollToSection('art-culture')">传统艺术</a></li>
        <li><a href="#religious-culture" @click.prevent="scrollToSection('religious-culture')">宗教文化</a></li>
        <li><a href="#god-parade-culture" @click.prevent="scrollToSection('god-parade-culture')">福州游神</a></li>
        <li><a href="#historical-culture" @click.prevent="scrollToSection('historical-culture')">历史古迹</a></li>
      </ul>
    </div>
    
    <!-- 地方民俗文化 -->
    <section id="folk-culture" class="culture-section">
      <h2>地方民俗文化</h2>
      <div class="folk-culture-content">
        <p class="intro-text">福州民俗文化丰富多彩，传承千年，是中华文化宝库中的重要组成部分。这些民俗活动不仅反映了福州人民的生活智慧，也承载着深厚的历史底蕴。</p>
        
        <div class="folk-items">
          <div class="folk-item">
            <div class="folk-icon">
              <i class="fas fa-utensils"></i>
            </div>
            <h3>拗九节</h3>
            <p>农历正月二十九，福州特有的传统节日，子女为父母煮拗九粥，表达孝心。此习俗已有数百年历史，体现了福州人重视孝道的传统美德。</p>
          </div>
          
          
          
          <div class="folk-item">
            <div class="folk-icon">
              <i class="fas fa-water"></i>
            </div>
            <h3>龙舟竞渡</h3>
            <p>端午节的重要活动，展现福州人民团结协作、奋勇争先的精神。福州的龙舟赛历史悠久，早在宋代就已盛行，是福州最具代表性的民俗活动之一。</p>
          </div>
          
          <div class="folk-item">
            <div class="folk-icon">
              <i class="fas fa-gift"></i>
            </div>
            <h3>做岁习俗</h3>
            <p>福州的春节习俗独具特色，包括祭灶、扫尘、贴春联、守岁等。除夕夜，福州人有吃太平面的传统，寓意平安吉祥。</p>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 船政文化 -->
    <section id="shipbuilding-culture" class="culture-section">
      <h2>船政文化</h2>
      <div class="shipbuilding-culture-content">
        <p class="intro-text">福州船政文化是中国近代工业文明的发源地之一，开创了中国近代海军和船舶工业的先河，是福州重要的历史文化名片。</p>
        
        <div class="shipbuilding-items">
          <div class="shipbuilding-item">
            <img src="/src/assets/images/culture/czzc.jpg" alt="马尾船政" class="shipbuilding-image">
            <h3>马尾船政</h3>
            <p>中国近代第一个专业造船厂，始建于1866年，开创了中国近代造船工业的先河，培养了大批工程技术人才。</p>
          </div>
          
          <div class="shipbuilding-item">
            <img src="/src/assets/images/culture/cztb.jpg" alt="船政学堂" class="shipbuilding-image">
            <h3>船政学堂</h3>
            <p>中国近代第一所海军学校，培养了中国第一批近代海军军官和造船工程师，被誉为"中国海军的摇篮"。</p>
          </div>
          
          <div class="shipbuilding-item">
            <img src="/src/assets/images/culture/czbwg.jpg" alt="船政博物馆" class="shipbuilding-image">
            <h3>船政博物馆</h3>
            <p>展示福州船政历史文化的专题博物馆，收藏了大量珍贵的历史文物和资料，是了解船政文化的重要窗口。</p>
          </div>
          
          <div class="shipbuilding-item">
            <img src="/src/assets/images/culture/czyz.jpg" alt="船政文化遗址" class="shipbuilding-image">
            <h3>船政文化遗址</h3>
            <p>包括船政衙门、船政轮机厂、船政绘事院等历史建筑群，是国家级文物保护单位，见证了中国近代化的历程。</p>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 传统艺术 -->
    <section id="art-culture" class="culture-section">
      <h2>传统艺术</h2>
      <div class="art-culture-content">
        <div class="art-item">
          <div class="art-info">
            <h3>闽剧</h3>
            <p>闽剧是福州传统戏曲，拥有400多年历史，以福州方言演唱，唱腔柔美悠扬。其表演细腻生动，服饰华丽精致，经典剧目《荔枝换绛桃》《钗头凤》等展现闽都人文魅力，被誉为"福州艺术瑰宝"。</p>
          </div>
        </div>
        
        <div class="art-item">
          <div class="art-info">
            <h3>福州评话</h3>
            <p>福州评话是独具特色的曲艺形式，一人一铙钹，用福州方言说表结合。表演者时而叙述时而代言，声情并茂，妙语连珠，生动演绎历史传奇和市井故事，深受当地民众喜爱。</p>
          </div>
        </div>
        
        <div class="art-item">
          <div class="art-info">
            <h3>寿山石雕</h3>
            <p>寿山石雕源于福州晋安，以"中国国石"寿山石为材，巧借天然色泽进行创作。技法涵盖圆雕、薄意、镂空等，作品玲珑剔透、巧夺天工，2006年被列入国家级非物质文化遗产名录。</p>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 宗教文化 -->
    <section id="religious-culture" class="culture-section">
      <h2>宗教文化</h2>
      <div class="religious-culture-content">
        <p class="intro-text">福州宗教文化多元化，佛教、道教、基督教等多种宗教并存，形成了独特的宗教文化景观。</p>
        
        <div class="religious-items">
          <div class="religious-item">
            <h3>涌泉寺</h3>
            <p>位于鼓山，始建于唐代，是福州最著名的佛教寺院之一，寺内珍藏有大量的文物古迹。</p>
          </div>
          
          <div class="religious-item">
            <h3>西禅寺</h3>
            <p>福州五大禅寺之一，寺内的报恩塔是福州的标志性建筑之一，寺内环境清幽，香火旺盛。</p>
          </div>
          
          <div class="religious-item">
            <h3>林阳寺</h3>
            <p>位于北峰山区，始建于南北朝时期，寺内的千年古刹和周围的自然景观相得益彰，是福州著名的佛教圣地。</p>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 福州游神文化 -->
    <section id="god-parade-culture" class="culture-section">
      <h2>福州游神文化</h2>
      <div class="god-parade-culture-content">
        <p class="intro-text">福州游神是福州地区极具特色的民间信仰活动，已有数百年历史，是福州民俗文化的重要组成部分。每年春节期间，各个村镇都会举行盛大的游神活动，祈求风调雨顺、国泰民安。</p>
        
        <div class="god-parade-items">
          <div class="god-parade-item">
            <img src="/src/assets/images/culture/ys1.png" alt="游神队伍" class="god-parade-image">
            <h3>游神盛况</h3>
            <p>游神队伍由锣鼓队、旗队、神轿等组成，声势浩大。村民们抬着当地信奉的神明塑像，沿着村庄主要道路巡游，沿途鞭炮齐鸣，锣鼓喧天，热闹非凡。</p>
          </div>
          
          <div class="god-parade-item">
            <img src="/src/assets/images/culture/ys2.png" alt="神明塑像" class="god-parade-image">
            <h3>民俗意义</h3>
            <p>游神不仅是宗教信仰的表达，更是社区凝聚力的体现。通过这一活动，村民们增进感情，传承文化，展现了福州人民对美好生活的向往和追求。</p>
          </div>
        </div>
        
        <div class="god-parade-description">
          <p>福州游神活动通常从正月初一开始，持续到正月十五。不同村镇有不同的主祀神明，如临水夫人、五福大帝、城隍爷等。游神过程中，村民们会在家门口设香案迎接，祈求神明保佑全家平安。这一传统习俗不仅保留了古代祭祀文化的精髓，也融入了现代元素，成为福州春节期间最具特色的民俗景观之一。</p>
        </div>
      </div>
    </section>

    <!-- 历史古迹 -->
    <section id="historical-culture" class="culture-section">
      <h2>历史古迹</h2>
      <div class="historical-culture-content">
        <p class="intro-text">福州作为国家历史文化名城，保存有大量的历史古迹，这些古迹见证了福州的发展历程，是福州历史文化的重要载体。</p>
        
        <div class="historical-items">
          <div class="historical-item">
            <h3>三坊七巷</h3>
            <p>福州历史文化街区的核心，是中国现存规模较大、保护较为完整的历史文化街区，被誉为"中国明清建筑博物馆"。</p>
          </div>
          
          <div class="historical-item">
            <h3>林则徐纪念馆</h3>
            <p>为纪念清代著名政治家、思想家林则徐而建，馆内展示了林则徐的生平事迹和相关文物。</p>
          </div>
          
          <div class="historical-item">
            <h3>马尾船政文化遗址</h3>
            <p>中国近代海军的摇篮，见证了中国近代化的进程，是福州重要的爱国主义教育基地。</p>
          </div>
        </div>
      </div>
    </section>
    
    <app-footer></app-footer>
  </div>
</template>

<style scoped>
/* 整体容器样式 */
.local-culture {
  min-height: 100vh;
  background-color: #f8f9fa;
  max-width: 100%;
  padding: 0;
}

/* 顶部大图和快捷导航样式 */
.hero-section {
  position: relative;
  margin-bottom: 30px;
  width: 100%;
}

.hero-image {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}

.main-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
  padding: 20px;
}

.hero-overlay h1 {
  font-size: 3rem;
  margin-bottom: 15px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  padding: 0;
  background: none;
  color: white;
}

.hero-subtitle {
  font-size: 1.5rem;
  margin-bottom: 0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* 右侧固定导航 */
.fixed-navigation {
  position: fixed;
  top: 70%;
  right: 10px;
  transform: translateY(-50%);
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  border-radius: 15px;
  padding: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  min-width: 120px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-header h3 {
  color: white;
  margin: 0 0 15px 0;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 600;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.nav-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-links li {
  margin: 8px 0;
}

.nav-links a {
  display: block;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.3s ease;
  font-size: 0.9rem;
  font-weight: 500;
  text-align: center;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-links a:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateX(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .fixed-navigation {
    right: 10px;
    min-width: 120px;
    padding: 15px;
  }
  
  .nav-links a {
    padding: 10px 12px;
    font-size: 0.85rem;
  }
}

@media (max-width: 768px) {
  .fixed-navigation {
    position: static;
    transform: none;
    margin: 20px auto;
    max-width: 200px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  }
  
  .nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
  
  .nav-links li {
    margin: 4px;
  }
  
  .nav-links a {
    padding: 8px 12px;
    font-size: 0.8rem;
  }
}

/* 通用区块样式 */
.culture-section {
  max-width: 1200px;
  margin: 0 auto 60px;
  padding: 30px;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.culture-section h2 {
  color: #2c3e50;
  border-bottom: 3px solid var(--secondary-color);
  padding-bottom: 15px;
  margin-bottom: 25px;
  font-size: 2rem;
  text-align: center;
}

/* 地方民俗文化样式 */
.folk-culture-content {
  padding: 10px;
}

.intro-text {
  text-align: center;
  color: #555;
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 30px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.folk-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
}

.folk-item {
  background-color: #f8f9fa;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
}

.folk-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.folk-icon {
  font-size: 2.5rem;
  color: #e74c3c;
  margin-bottom: 20px;
}

.folk-item h3 {
  color: #2c3e50;
  margin-bottom: 15px;
  font-size: 1.4rem;
}

.folk-item p {
  color: #555;
  line-height: 1.7;
  font-size: 1rem;
}

/* 船政文化样式 */
.shipbuilding-culture-content {
  padding: 10px;
}

.shipbuilding-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 25px;
}

.shipbuilding-item {
  background-color: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  text-align: center;
}

.shipbuilding-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}

.shipbuilding-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.shipbuilding-item h3 {
  color: #2c3e50;
  margin: 20px 0 12px 0;
  font-size: 1.3rem;
  font-weight: 600;
}

.shipbuilding-item p {
  color: #555;
  line-height: 1.7;
  padding: 0 20px 20px 20px;
  font-size: 0.95rem;
  margin: 0;
}

/* 传统艺术样式 */
.art-culture-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.art-item {
  background-color: #f8f9fa;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

.art-item:hover {
  transform: translateX(10px);
}

.art-info h3 {
  color: #2c3e50;
  margin-bottom: 10px;
  font-size: 1.3rem;
  display: inline-block;
  border-bottom: 2px solid var(--primary-color);
  padding-bottom: 5px;
}

.art-info p {
  color: #555;
  line-height: 1.7;
  margin-left: 20px;
}

/* 宗教文化样式 */
.religious-culture-content {
  padding: 10px;
}

.religious-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 25px;
}

.religious-item {
  background-color: #f8f9fa;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  text-align: center;
}

.religious-item h3 {
  color: var(--primary-color);
  margin-bottom: 15px;
  font-size: 1.4rem;
}

.religious-item p {
  color: #555;
  line-height: 1.7;
}

/* 福州游神文化样式 */
.god-parade-culture-content {
  padding: 10px;
}

.god-parade-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-bottom: 30px;
}

.god-parade-item {
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.god-parade-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.god-parade-image {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.god-parade-item h3 {
  color: var(--primary-color);
  margin: 20px 0 15px 0;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 600;
}

.god-parade-item p {
  color: #555;
  line-height: 1.7;
  padding: 0 25px 25px 25px;
  text-align: center;
  font-size: 1rem;
}

.god-parade-description {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding: 25px;
  border-radius: 12px;
  border-left: 5px solid var(--primary-color);
}

.god-parade-description p {
  color: #495057;
  line-height: 1.8;
  font-size: 1.05rem;
  text-align: justify;
  margin: 0;
}

/* 历史古迹样式 */
.historical-culture-content {
  padding: 10px;
}

.historical-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 25px;
}

.historical-item {
  background-color: #f8f9fa;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  text-align: center;
}

.historical-item h3 {
  color: #d35400;
  margin-bottom: 15px;
  font-size: 1.4rem;
}

.historical-item p {
  color: #555;
  line-height: 1.7;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .hero-image {
    height: 300px;
  }
  
  .hero-overlay h1 {
    font-size: 2rem;
  }
  
  .hero-subtitle {
    font-size: 1.1rem;
  }
  
  .quick-navigation ul {
    flex-direction: column;
    align-items: center;
  }
  
  .quick-navigation a {
    width: 100%;
    text-align: center;
  }
  
  .culture-section {
    padding: 20px;
    margin-bottom: 40px;
  }
  
  .culture-section h2 {
    font-size: 1.6rem;
  }
  
  .folk-items,
  .food-items,
  .religious-items,
  .historical-items {
    grid-template-columns: 1fr;
  }
}

</style>


<script>
import AppFooter from '../components/Footer/Footer.vue'
export default {

  name: 'LocalCultureView',
  components: {
    AppFooter
  },
  methods: {
    scrollToSection(sectionId) {
      const element = document.getElementById(sectionId);
      if (element) {
        element.scrollIntoView({ behavior: 'smooth' });
      }
    }
  }
}</script>

